<script setup>
import { onBeforeUnmount, ref, shallowRef } from 'vue'
import { Editor } from '@wangeditor/editor-for-vue'
const props = defineProps({
  val: {
    type: String,
    default: '',
  },
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const html = ref(props.val)
const editorConfig = {
  placeholder: '暂无内容内容...',
}

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  editorRef.value.disable()
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  if (editorRef.value) editorRef.value.destroy()
})
</script>
<template>
  <Editor v-model="html" :defaultConfig="editorConfig" @onCreated="handleCreated" />
</template>

<style>
.w-e-full-screen-container {
  z-index: 999 !important;
}
.table-container,
.w-e-textarea-video-container {
  background-image: none;
  border: none !important;
  padding: 0 !important;
  margin: 0;
}
</style>
